Titles and Subtitles
This is Heading 1
## This is Heading 2
### This is Heading 3
#### This is Heading 4
##### This is Heading 5
###### This is Heading 6
Markdown is the simplest way to create a static website. It is a plain text format that is easy to read and write. Indeed, the page you're reading now was initially typed up in Markdown. You can then use this Python-Markdown module to convert this to HTML. Then use Jinja2 to insert into an HTML template. Indeed this is what I've used to create the webpage you're reading now.
Horizontal Rule
A horizontal rule is three or more dashes ---
, asterisks ***
, or underscores ___
Text Styling
Get bold or italic text by surrounding text with asterisks *
or underscores _
This is *italic*. This is **bold**. This is ***bold and italic***. The complete list of styling text inlined in markdown is:
Style | Syntax | Result |
---|---|---|
Italic | *datatype* or _datatype_ |
datatype |
Bold | **datatype** or __datatype__ |
datatype |
Bold italic | ***datatype*** or ___datatype___ |
datatype |
Inline code | `dataatype` |
datatype |
Strikethrough | ~~datatype~~ |
Tables
Tables are much simpler in Markdown than they are in HTML. Simply add a few pipes |
to separate the columns and a row of dashes ---
to separate the headers with the values. On this row you can use the :
character to align the columns.
Left | Center | Right
:----|:------:|------:
Value | Value | Value
Value | Value | Value
Becomes,
Left | Center | Right |
---|---|---|
Value | Value | Value |
Value | Value | Value |
Lists
Unordered Lists
Create an unordered list with a dash -
, plus +
or asterisk *
at the beginning of each line.
- list item
- list item
- list item
- list item
- list item
- list item
- list item
- list item
- list item
- list item
- list item
- list item
- list item
Ordered Lists
Create an ordered list with any number and a period. Any number can be used (e.g. all 1.
) and markdown will automatically number the list appropriately
1. List item
1. List item
1. List item
1. List item
1. List item
1. List item
- List item
- List item
- List item
- List item
- List item
- List item
- List item
Block Quote
Create a block quote by starting each line with a >
> This is a block quote.
> This is the same block quote.
To produce,
This is a block quote.
This is the same block quote.
Code
Create inline code by surrounding text with single backticks `
, e.g. `E = mc^2`
.
A code block uses three backticks or three tildes to delimit the code.
```python
# print 'hello' 10 times
for i in range(10):
print('hello')
```
To produce,
# print 'hello' 10 times
for i in range(10):
print('hello')
Links
The markdown syntax for creating links is:
This is a link: [Wikipedia](https://en.wikipedia.org/wiki/Markdown).
To produce,
This is a link: Wikipedia.
Images
The markdown syntax for creating images is:
This is an image: ![](/images/blog/solar_system.png)
This is an image:
Markdown Extra
It is possible to get additional markdown support with the Markdown Extra extension. You can find a list of the available features here.
Abbreviations
Declare some abbreviations (which are also useful for tooltip definitions) and then use them in your text,
*[MD]: Markdown
*[HTML]: Hypertext Markup Language
*[CSS]: Cascading Style Sheets
This page is written in MD, converted to HTML and styled with CSS.
To produce,
This page is written in MD, converted to HTML and styled with CSS.
Attribute List
Create custom classes by adding {: .classname}
after a markdown element.
For example,
This is a highlighted paragraph
{.highlight}
To produce (with CSS styling),
This is a hightlighted paragraph
Definition Lists
Create definition lists with,
Mercury
: The smallest planet in the solar system.
Venus
: The second smallest planet in the solar system.
Earth
: The third planet from the sun.
: The red planet.
: Where the martians are from.
To produce,
- Mercury
- The smallest planet in the solar system.
- Venus
- The second smallest planet in the solar system.
- Earth
- The third planet from the sun.
- Mars
- The fourth planet from the sun.
- The red planet.
- Where the martians are from.
Admonition
Create some admonitions / alerts with:
!!! warning
This is a warning message.
This is a warning message.
This is a warning message.
!!! danger
This is a danger message.
!!! info
This is information message.
!!! success
This is a success message.
Warning
This is a warning message.
This is a warning message.
This is a warning message.
Danger
This is a danger message.
Info
This is an information message.
Success
This is a success message.
Using HTML
You can also just use plain html in your markdown text. This html (with some CSS) can be used to create columns,
<div class="row" markdown=1>
<div class="col" markdown=1>
# Left
The paragraph on the left
</div>
<div class="col" markdown=1>
# Right
The paragraph on the right
</div>
</div>
The markdown=1
attribute is included to write markdown inside html elements. The result is,
Left
The paragraph on the left
Right
The paragraph on the right